<template>
	<view class="p20 h100vh">
		<u-input placeholder="搜索职位名称" prefixIcon="search" prefixIconStyle="font-size: 40rpx;color: #aaa"
			class="inp ml10">
			<template slot="suffix">
				<u-button @tap="getCode" text="搜索" class="but" size="mini"></u-button>
			</template>
		</u-input>
		<view class="ox-auto  br--20 p20">
			<view class="flex  ox-auto w-max">
				<view @click="orderStateChange(item.status)" :class="orderState == item.status ? 'active' : ''"
					class="pr center  vvl40 f14   flex a-center" v-for="(item,index) in tabList" :key="index">
					<view class="mr10">{{item.label}}</view>
					<image src="../../static/xias.svg" mode="widthFix">
					</image>
				</view>
			</view>
			<myPicker v-model="value" v-show="show" :option="{label:'label',value:'id'}" :list="[{id:1,label:'a'}]">
			</myPicker>
		</view>
		<scroll-view scroll-y="true" class="scroll-view oy-auto  pr h100 " @scrolltolower="getMore">
			<view class="p20 bag--fff mt20 br--20" v-for="item in 2" @click="goto('/pages/index/jobdetail')">
				<view class="fw  f15 text-hidden-1">
					企业招聘标题业务员样式同京津务工就1行再长的嗷嗷嗷是谁谁
				</view>
				<view class="flex a-center ju--between mt20">
					<view class="cred f15">
						30.00元/月
						<!-- <span class="f10 ml10 co--7676"></span> -->
					</view>
					<view class="co--999 f12">
						1分钟前
					</view>
				</view>
				<view class=" f12 flex a-center mt20">
					<view class="bag co--7676">
						桃城区
					</view>
					<view class="bag co--7676 ml20">
						桃城
					</view>
				</view>
				<view class="flex a-center  mt30">
					<image src="../../static/shi.png" mode="" class="img20"></image>
					<view class="co--999 f12 mlr10">
						衡水市妙音文化传媒有限公司
					</view>
					<image src="../../static/qi.png" mode="" class="img16"></image>
				</view>
			</view>
			<view class="center fs12 co--999 mt10">
				上滑加载更多
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderState: null,
				tabList: [{
					label: '职位类别',
					status: 0
				}, {
					label: '全部地区',
					status: 1
				}, {
					label: '薪资范围',
					status: 2
				}, {
					label: '经验要求',
					status: 3
				}],
				pageNo: 1,
				show: false
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			resetArr() {
				this.pageNo = 1
			},
			orderStateChange(id) { // 订单状态变化
				if (this.orderState !== id) {
					this.orderState = id
					// this.resetArr()
					if (this.orderState == 0) {} else {
						// this.accompanyOrderList()
					}
				}
			},
			getMore() {
				this.pageNo++
				console.log(this.pageNo)
			},
			async getlist() {
				let {
					data
				} = await this.$rqt.getSalaryUnitList()
				console.log(data)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-border {
		border: none;
		background: #fff;
	}

	::v-deep .u-input--radius {
		border-radius: 42rpx !important;
	}

	::v-deep .u-input {
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	::v-deep .u-button {
		width: 120rpx !important;
		height: 56rpx !important;
		border-radius: 28rpx !important;
		background: #0256FF !important;
		color: #fff !important;
		font-size: 28rpx;
	}

	.w-max {
		width: max-content;

		.active {
			color: var(--cg);
		}

		image {
			width: 28rpx;
			height: 28rpx;
			// position: absolute;
			// bottom: 10rpx;
			// left: 50%;
			// transform: translateX(-50%);
		}
	}

	.vvl40+.vvl40 {
		margin-left: 20rpx;
	}

	.w3 {
		width: 3em;
	}

	.bag {
		background: #F1F1F1;
		padding: 4rpx;
		border-radius: 4rpx;
	}
</style>